<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html	xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="template/commonTemplate.xhtml">
	
	<ui:define name="pageMetaData">
	<!-- permet de déclarer une ressource qui se trouve dans le dossier css du dossier parent resources -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="../css/style.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->		
				
		<!-- JS -->
		<script src="../js/jquery-1.7.1.min.js"></script>
		<script src="../js/custom.js"></script>
		<script src="../js/tabs.js"></script>
		<script src="../js/css3-mediaqueries.js"></script>
		<script src="../js/jquery.columnizer.min.js"></script>
		
		<!-- Isotope -->
		<script src="../js/jquery.isotope.min.js"></script>
		
		<!-- Lof slider -->
		<script src="../js/jquery.easing.js"></script>
		<script src="../js/lof-slider.js"></script>
		<link rel="stylesheet" href="../css/lof-slider.css" media="all"  /> 
		<!-- ENDS slider -->
		
		<!-- Tweet -->
		<link rel="stylesheet" href="../css/jquery.tweet.css" media="all"  /> 
		<script src="../js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="../css/superfish.css" /> 
		<script  src="../js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="../js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="../js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="../js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="../js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="../js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- JCarousel -->
		<script type="text/javascript" src="../js/jquery.jcarousel.min.js"></script>
		<link rel="stylesheet" media="screen" href="../css/carousel.css" /> 
		<!-- ENDS JCarousel -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'/>

		<!-- modernizr -->
		<script src="../js/modernizr.js"/>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="../css/skin.css"/>
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="../css/lessframework.css"/>
		
		<!-- flexslider -->
		<link rel="stylesheet" href="../css/flexslider.css" />
		<script src="../js/jquery.flexslider.js"></script>
	</ui:define>
	
  	<ui:define name="styles">
  	</ui:define>
  	
  	<ui:define name="title">Bustle</ui:define>
  	
  	<ui:define name="content" id="content">
	<div id="main" style="padding-top: 90px;">
			<div class="wrapper cf">
			
			<!-- portfolio content-->
        	<div id="portfolio-content" class="cf">        	
					
					<!-- project box -->
				<div id="project-box" class="cf">
				
					<!-- slider -->
					<div class="project-slider">
				        <div class="flexslider">
						  <ul class="slides">
						    <li>
						      <img src="../img/dummies/slides/rond.png" alt="alt text" />
						    </li>
						    <li>
						      <img src="../img/dummies/slides/carre.png" alt="alt text" />
						    </li>
						    <li>
						      <img src="../img/dummies/slides/etoile.png" alt="alt text" />
						    </li>
						  </ul>
						</div>
					</div>
		        	<!-- ENDS slider -->


					<div class="info">
	        			<p>Bienvenue chez <strong>BUSTLE</strong></p>
	        		</div>
	        		
	        		<!-- entry-content -->
	        		<div class="entry-content">
	        		
	        			<h2 class="heading">Payment</h2>
	        			
	        			<div>
	        				<h:form>
              			 		<h:messages />
	        					<h:panelGrid id="grid" columns="1" cellpadding="5">
		        					Numéro de carte : <h:inputText value="#{paymentMBean.cardNumber}"></h:inputText><br/>
		        					Date d'expiration : <h:inputText value="#{paymentMBean.expirationDate}"><f:convertDateTime pattern="dd/MM/yyyy"/></h:inputText><br/>
		        					Cryptogram : <h:inputText value="#{paymentMBean.cryptogram}"> </h:inputText><br/>
			                        Prix : <h:outputText value="#{paymentMBean.price}"></h:outputText><br/>
		        					<br/><br/>
		        					<h:commandButton value="Payer" action="#{paymentMBean.pay}"></h:commandButton>
	        					</h:panelGrid>
	        				</h:form>
	        			</div>
	        		</div>
	        		<!-- ENDS entry content -->
	        		
	        	</div>
		    	<!-- ENDS project box -->
				
				
    		</div>
    		<!-- ENDS portfolio content-->
			
			
			
			</div><!-- ENDS WRAPPER -->
		</div>   
  	</ui:define>
  	
</ui:composition>
</html>